<template>
    <div>
        <div>
            <van-nav-bar  title="会员中心" />
        </div>
        <div class="top">
           <img src="http://tx.haiqq.com/uploads/allimg/170506/0145222N4-7.jpg" class="top-img" />
        </div>
        <div class="login">
            <div><van-button type="warning" @click="login">我要登录</van-button></div>
            <div><van-button type="primary" @click="register">我要注册</van-button></div>
            
        </div>
        <div>
          
            <van-cell-group>
                <span class="welcome">你好呀，{{this.userName}}</span>
                <van-cell title="会员卡" is-link />
                <van-cell title="地址管理" is-link  />
                <van-cell title="我的订单" is-link  />
                <van-cell title="会员权益" is-link />
                <van-cell title="联系我们" is-link  />
                <div><van-button type="danger" size="large" @click="logout">注销</van-button></div>
            </van-cell-group>

        </div>

    </div>
</template>

<script>
    import {Toast} from 'vant'
    export default {
        data() {
          return {
            userName:''
          }
        },
        mounted() {
          // localStorage.removeItem('userinfo')
          // var userCmsData=localStorage.getItem("userInfo");
          if(localStorage.userInfo){
            var userCmsData=localStorage.getItem("user");
            userCmsData=JSON.stringify(userCmsData);
            this.userName=userCmsData.replace(/\"/g,'');
          }else{
            this.userName='游客'
          }
          
          // userCmsData=JSON.parse(userCmsData);
          // console.log(userCmsData)
        },

        methods: {
          login(){
            this.$router.push('login')
          },
          register(){
            this.$router.push('register')
          },
          logout(){
            localStorage.removeItem('userInfo')
            localStorage.removeItem('user')
            Toast.success('注销成功')
            this.$router.push('member')
          }
        },
    }
</script>

<style scoped>
    .top-img{
        width:70px;
        height: 70px;
        border-radius: 50px;
    }
    .top{
        height:5rem;
        text-align: center;
        padding-top:2rem;
        background:linear-gradient(35deg,rgb(74, 72, 204),#f02267d0);
    }
    .login{
        display: flex;
        flex-direction: row;
        background-color: #fff;
        padding:10px;
    }
    .login div{
        flex:1;
        text-align: center;
    }
    a{
      color: white;
    }
    span.welcome{
      text-align: center;
      display: block;
      line-height: 2rem;
      width: 100%;
    }
</style>